<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的页面原型</title>
    <style>
        /* 全局样式 - 严格遵循设计规范 */
        html,
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                         "PingFang SC", "Hiragino Sans GB",
                         "Microsoft YaHei", sans-serif;
            background-color: #faf9f5;
            color: #333333;
            font-size: 14px;
            line-height: 1.4;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 页面容器 */
        .container {
            max-width: 480px;
            margin: 0 auto;
            background-color: #f5f5f6;
            min-height: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        .topNav {
            background-color: #ffffff;
            padding: 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            font-size: 18px;
            font-weight: 600;
            color: #333333;
        }

        /* 内容区域 */
        .contentArea {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
        }

        /* ===== 用户信息区 ===== */
        .userInfo {
            background-color: #ffffff;
            padding: 16px 20px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .userAvatar {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            background-color: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #999999;
            position: relative;
        }

        /* 头像中的占位符（闪电图标） */
        .userAvatar::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #d0d0d0;
            border-radius: 3px;
            opacity: 0.5;
        }

        .userDetails {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .userName {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 4px;
        }

        .userStatus {
            font-size: 12px;
            color: #999999;
        }

        .userBindPhoneWrapper {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .userBindPhone {
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
            width: fit-content;
            background-color: #f0f0f0;
        }

        /* ===== 数据统计区 ===== */
        .statsContainer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 0 20px 30px;
            gap: 10px;
            background-color: #fff;
        }

        .statCard {
            background-color: #f5f5f6;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .statCard:hover {
            background-color: #ececed;
            transform: translateY(-2px);
        }

        .statIcon {
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 6px;
            background-color: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #999999;
        }

        .statContent {
            flex: 1;
            text-align: left;
        }

        .statNumber {
            font-size: 24px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 0px;
        }

        .statLabel {
            font-size: 14px;
            color: #333333;
        }

        /* ===== 菜单列表 ===== */
        .menuList {
            background-color: #ffffff;
            overflow: hidden;
            margin-bottom: 16px;
        }

        .menuItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .menuItem:hover {
            background-color: #fafafa;
        }

        .menuItemContent {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }

        .menuIcon {
            width: 28px;
            height: 28px;
            min-width: 28px;
            border-radius: 6px;
            background-color: #fafafa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #999999;
            font-weight: 500;
        }

        .menuItemText {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .menuItemTitle {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
        }

        .menuItemSubtitle {
            /* display: none; */
            font-size: 11px;
            color: #999999;
        }

        .menuArrow {
            color: #d0d0d0;
            font-size: 16px;
            font-weight: 300;
        }

        /* 颜色区分菜单图标 - 使用灰度方案 */
        .menuIcon.video {
            background-color: #f0f0f0;
        }

        .menuIcon.order {
            background-color: #f0f0f0;
        }

        .menuIcon.location {
            background-color: #f0f0f0;
        }

        .menuIcon.support {
            background-color: #e8e8e8;
        }

        /* ===== 弹出框样式 ===== */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }

        .modal.show {
            display: flex;
        }

        .modalContent {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            width: 280px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .modalTitle {
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .modalButton {
            background-color: #ffffff;
            color: #333333;
            border: 1px solid #e0e0e0;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

        .modalButton:hover {
            background-color: #f5f5f5;
            border-color: #d0d0d0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <div class="topNav">我的</div>

        <!-- 内容区域 -->
        <div class="contentArea">
            <!-- 用户信息卡片 -->
            <div class="userInfo">
                <div class="userAvatar"></div>
                <div class="userDetails">
                    <div class="userName" id="userName">用户加载中...</div>
                    <div class="userBindPhoneWrapper">
                        <div class="userBindPhone" onclick="showBindPhoneModal()">
                            绑定手机号 ›
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据统计卡片 -->
            <div class="statsContainer">
                <div class="statCard" onclick="goToGameList()">
                    <div class="statIcon">球</div>
                    <div class="statContent">
                        <div class="statNumber">0</div>
                        <div class="statLabel">我的球局</div>
                    </div>
                </div>
                <div class="statCard">
                    <div class="statIcon">记</div>
                    <div class="statContent">
                        <div class="statNumber">0</div>
                        <div class="statLabel">观看记录</div>
                    </div>
                </div>
            </div>

            <!-- 菜单列表 -->
            <div class="menuList">
                <!-- 我的视频 -->
                <div class="menuItem" onclick="goToMyVideos()">
                    <div class="menuItemContent">
                        <div class="menuIcon video">视</div>
                        <div class="menuItemText">
                            <div class="menuItemTitle">我的视频</div>
                        </div>
                    </div>
                    <div class="menuArrow">›</div>
                </div>

                <!-- 我的订单 -->
                <div class="menuItem">
                    <div class="menuItemContent">
                        <div class="menuIcon order">订</div>
                        <div class="menuItemText">
                            <div class="menuItemTitle">我的订单</div>
                        </div>
                    </div>
                    <div class="menuArrow">›</div>
                </div>

                <!-- 技术支持 -->
                <div class="menuItem" onclick="showSupportModal()">
                    <div class="menuItemContent">
                        <div class="menuIcon support">技</div>
                        <div class="menuItemText">
                            <div class="menuItemTitle">技术支持</div>
                        </div>
                    </div>
                    <div class="menuArrow">›</div>
                </div>
            </div>

            <!-- 版本信息 -->
            <!-- <div style="text-align: center; font-size: 11px; color: #999999; margin-top: 20px;">
                <div>当前版本 9.16.5 正式版</div>
            </div> -->
        </div>

    </div>

    <!-- 技术支持弹出框 -->
    <div class="modal" id="supportModal" onclick="closeSupportModal(event)">
        <div class="modalContent" onclick="event.stopPropagation()">
            <div class="modalTitle">技术支持电话：101-097-77</div>
            <button class="modalButton" onclick="closeSupportModal()">取消</button>
        </div>
    </div>


    <script>
        /**
         * 初始化用户信息
         * 自动调用登录并生成游客用户名
         */
        function initUser() {
            // 检查本地存储中是否已有用户信息
            let userInfo = localStorage.getItem('userInfo');

            if (!userInfo) {
                // 生成新的游客用户名: user_时间戳
                const timestamp = Date.now();
                const guestUsername = `user_${timestamp}`;

                // 模拟 wx.login 隐匿登录
                // 实际项目中会通过 wx.login() 获取 code，然后后端换取 session_key 和 openid
                const mockLoginData = {
                    username: guestUsername,
                    openId: `openId_${timestamp}`,
                    isGuest: true,
                    loginTime: new Date().toISOString()
                };

                // 保存到本地存储
                localStorage.setItem('userInfo', JSON.stringify(mockLoginData));
                userInfo = mockLoginData;
            } else {
                userInfo = JSON.parse(userInfo);
            }

            // 显示用户名
            const userNameEl = document.getElementById('userName');
            if (userNameEl) {
                userNameEl.textContent = userInfo.username;
            }

            return userInfo;
        }

        // 页面加载完成后初始化用户
        window.addEventListener('load', initUser);

        // 绑定手机号（调用微信 API）
        function showBindPhoneModal() {
            // 在实际小程序环境中，这里会调用 wx.getUserProfile 获取手机号
            // 目前只显示提示信息
            alert('此处将调用微信API自动获取手机号码进行绑定');

            // 后续实现：
            // wx.getUserProfile({
            //     desc: '获取您的手机号以完成绑定',
            //     success: (res) => {
            //         // 处理绑定逻辑
            //         const userInfo = JSON.parse(localStorage.getItem('userInfo'));
            //         userInfo.phone = res.userInfo.phoneNumber;
            //         userInfo.isGuest = false;
            //         userInfo.bindTime = new Date().toISOString();
            //         localStorage.setItem('userInfo', JSON.stringify(userInfo));
            //     }
            // });
        }

        // 跳转到球局列表页
        function goToGameList() {
            window.location.href = '球局列表页原型.html';
        }

        // 跳转到我的视频页
        function goToMyVideos() {
            window.location.href = '我的视频原型.html';
        }

        // 显示技术支持弹出框
        function showSupportModal() {
            const modal = document.getElementById('supportModal');
            modal.classList.add('show');
        }

        // 关闭技术支持弹出框
        function closeSupportModal(event) {
            const modal = document.getElementById('supportModal');
            // 检查点击是否在模态框外部
            if (!event || event.target === modal) {
                modal.classList.remove('show');
            }
        }

        // 按Esc键关闭弹出框
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modal = document.getElementById('supportModal');
                modal.classList.remove('show');
            }
        });
    </script>
</body>
</html>
